<!--
## 17、Vue：watch监控属性

> 目标: 掌握watch监控属性的使用
watch可以帮我们监控data数据对象中的属性值发生改变
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs监控属性</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="message"/><br/>
    <h2>{{message}}</h2>

    <input type="text" v-model="user.name"/><br/>
    <input type="text" v-model="user.age"/><br/>
    <h2>
        姓名: {{user.name}} ==> 年龄: {{user.age}}
    </h2>
</div>

<script type="text/javascript">
    var vue = new Vue({
        el: '#app', // 渲染的html元素
        data: { // 数据对象
            message: '',
            user: {name: '', age: ''}
        },
        watch: { // 监控属性
            message: function (newVal, oldVal) {
                console.log("新值:" + newVal + ",旧值:" + oldVal);
            },
            "user.name": function (newVal, oldVal) {
                console.log("user.name:" + newVal + ",user.name:" + oldVal);
            }
        }
    });
</script>
</body>
</html>